  <template>
  <!-- vx公众号充值-->
  <div class="recharge">
    <div class="banner_title">
      <img src="../../public/img/other/guanbo.png" alt="">
      <span>充值到账时间可能有一定延迟，到账后无法退款，不可提现。</span>
    </div>
    <div class="van_overlay" v-if="show" @click="click_userid" />
    <div class="uner_list" v-if="user_list.user_id">
      <div><img :src="user_list.head_pic" alt="" /></div>
      <div>
        <div>{{ user_list.nick_name }}</div>
        <div>ID: {{ user_list.perfect_number }}</div>
      </div>
      <div @click="xiugai_userlist">修改</div>
    </div>
    <div class="recharge_my" v-else>
      <div class="roomifo_search">
        <div>
          <input
            type="number"
            v-model="perfectNumber"
            @keyup.13="blurClick"
            @click="clickinput"
            placeholder="请输入充值用户id"
          />
        </div>
      </div>

      <div class="record" v-if="record" :style="{ height: heighr_ + 'vw' }">
        <div class="record_list">
          <div>最近搜索</div>
          <div @click="close_location">清空</div>
        </div>
        <div class="record_cookien">
          <div v-for="(item, index) in arrlist" :key="index">
            <div @click="open_id(item.perfect_number, item.user_id)">
              <strong>{{ item.perfect_number }}</strong> / {{ item.nick_name }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="recharge_money">
      <p>请选择钻石数量</p>
      <ul class="recharge_buy">
        <li
          v-for="(item, index) in buyList"
          :class="liNum == index ? 'hong' : 'hui'"
          :key="index"
          @click="changeClick(index)"
        >
          <p><img src="../../public/img/other/zuan.png" />{{ item.diamond }}</p> 
          <p>￥{{ item.money }}</p>
          <img v-if="liNum == index" src="../../public/img/other/active_.png" alt="">
        </li>
      </ul>

      <div class="OtherAmounts"> 
         <input type="number" v-model="num_money" placeholder="点击输入其它充值金额"  oninput="value=value.replace(/[^\d]/g,'')">
         <div v-if="num_money">{{num_money*100}}钻</div>
      </div>

      <p>选择支付方式</p>
      <div class="PaymentMethod">
        <!-- <div :class="isPayment?'border_bott AlipayPayment':'AlipayPayment'" @click="isPayment = true">
          <img src="../../public/img/other/AlipayPayment.png" alt="">
          <img v-show="isPayment" src="../../public/img/other/active_.png" alt="">
          <img src="../../public/img/other/tuijian.png" alt="">
        </div> -->
        <div :class="!isPayment?'border_bott WechatPayment':'WechatPayment'" @click="isPayment = false">
          <img src="../../public/img/other/WechatPayment.png" alt="">
          <img v-show="!isPayment" src="../../public/img/other/active_.png" alt="">
        </div>
      </div>
      <div class="Tips_">
         <span>温馨提示：</span>
         <span> <input type="checkbox" v-bind:checked="isChecked" v-on:click="handleDisabled"/>充值前请确认您已满18周岁，未成年人不允许充值、未成年人不允许打赏，阅读并同意<span @click="topush">《充值服务协议》</span></span>
      </div>
      <div @click="handelPay">充值</div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <script>
import { Toast } from "vant";
import { paymentSubmit } from "../../assets/industry";
import "../../assets/jquery-3.4.1.min.js";
// import md5 from "js-md5";
import qs from "qs";
export default {
  data() {
    return {
      isChecked:true,
      isPayment:false,//微信支付
      myZuan: 0,
      buyList: "",
      liNum: 1,
      clickShow: true,
      show: false,
      copyUrl: "paipaixqkefu",
      isDisabledSubmitBtn: true, //按钮是否禁用
      money: null, //金额
      token: "",
      userId: "",
      userId_seach: "",
      openId: "",
      username: "",
      payList: {},
      perfectNumber: null, //31548290
      record: false,
      user_list: {}, //查询到的用户信息
      arrlist: [], //缓存查询数据
      num_money:"",
      list_index:"",//临时保存数据
    };
  },
  watch:{
      num_money: {
        handler: function () {
          if (this.num_money > 999999) {
            this.num_money = 999999;
            return Toast("最多兑换999999");
          }else{
             this.liNum = "-1";
             if(this.num_money != ""){
               this.num_money = Math.floor(Math.abs(this.num_money));
             }
             if(this.num_money == "" &&  this.liNum == "-1"){
                 this.liNum = '1'
             }
          }
        },
        deep: true,
      },
  },
  computed: {
    heighr_: function () {
      return this.arrlist.length * 10.7 + 12;
    },
  },
  created() {
    let openId = this.getCookie("openId");
    if (!!openId) {
      let token = this.getCookie("token");
      if (!token) {
        this.$store.commit("change", "/recharge_wx");
      }
      let userId = this.getCookie("userId");
      this.userId = userId;
      this.token = token;
    } else {
      //没有openId
      let url = location.href;
      let codetest = RegExp(/code/);
      if (codetest.test(url)) {
        //地址中有code值
        let codeStr = url.split("?")[1].split("&")[0].split("=")[1];
        this.getOpenID(codeStr);
      } else {
        //地址中没有code值
        this.getCode();
      }
    }
    
    this.getZuan();
  },
  methods: {
       handleDisabled(){
        this.isChecked = !this.isChecked;
        if(this.isChecked==true){
            this.isDisabled =  true;
        }
        else{
            this.isDisabled =  false;
        }
    },
    topush(){
       this.$router.push("/rechargeProtocol");
    },
    click_userid() {
      this.show = false;
      this.blurClick();
    },
    //清除最近浏览
    close_location() {
      this.show = false;
      this.arrlist = [];
      this.$.removeCookie("weekDay");
      this.record = false;
    },
    //获取光标
    clickinput() {
      this.show = true;
      if (this.$.getCookie("weekDay")) {
        this.record = true;
        this.arrlist = JSON.parse(this.$.getCookie("weekDay"));
      }
    },
    //回车事件
    blurClick() {
      this.show = false;
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      this.record = false;
      let arys = {
        perfectNumber: this.perfectNumber,
        userId: this.userId,
        time: timestamp,
        token: this.token,
      };
      let _token = this.$.encryption(arys);
      // console.log(_token);
      let params = {
        time: timestamp,
        perfectNumber: this.perfectNumber,
        sign: this.$.md5(_token),
      };
      this.$axios
        .post("/user/getUserbyNumber", qs.stringify(params))
        .then((res) => {
          if (res.data.status == 0) {
            this.user_list = res.data.result;
            this.userId_seach = res.data.result.user_id;
            var weekArray = [];
            let obj = {
              perfect_number: res.data.result.perfect_number,
              user_id: res.data.result.user_id,
              nick_name: res.data.result.nick_name,
            };

            //判断cookie是否有值
            if (this.$.getCookie("weekDay")) {
              //有值，取出来
              var weekArray2 = JSON.parse(this.$.getCookie("weekDay"));
              //判断已有的值和要存的值user_id是否有相同
              var result = weekArray2.find((item) => {
                return item.user_id == obj.user_id;
              });
              //不相同
              if (result == undefined) {
                weekArray = weekArray2;
                weekArray.push(obj);
                this.$.setCookie("weekDay", JSON.stringify(weekArray), 180);
              }
            } else {
              //cookie为空直接存，不用判断
              weekArray.push(obj);
              this.$.setCookie("weekDay", JSON.stringify(weekArray), 180);
            }
            this.perfectNumber = "";
          } else {
            // Toast(res.data.text);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCode() {
      let codeUrl = "";
      let url = encodeURIComponent(
        "https://h5.xunyinjiaoyou.com/h5/#/recharge_wx"
      );
      codeUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd35b45f47cc708a7&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
      location.href = codeUrl;
    },
    getOpenID(code) {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      this.$axios
        .post("/index/getOpenId", qs.stringify({ code: code, time: timestamp }))
        .then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            // if (res.data.result.openid) {
            // this.setCookie(
            //   "userId",
            //   res.data.result.user_info.userId,
            //   res.data.result.user_info.tokenExpiryTime
            // );
            this.setCookie("openId", res.data.result.openid, 180);
            let token = this.getCookie("token");
            if (token) {
              let userId = this.getCookie("userId");
              this.userId = userId;
              this.token = token;
              this.getZuan();
            } else {
              this.$store.commit("change", "/recharge_wx");
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeClick(index) {
      this.liNum = index;
    },
    changeinputClick() {
      this.clickShow = !this.clickShow;
    },
    getZuan() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        "0" +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: 0,
        time: timestamp,
        token: this.token,
        sign: this.$.md5(_token),
      };
      this.$axios
        .post("/user/diamondList", qs.stringify(params))
        .then((res) => {
          // console.log(res.data);
          if (res.data.status == 0) {
            this.myZuan = res.data.result.diamond;
            this.buyList = res.data.result.values;
            // this.username = res.data.result.user.nickname;
          } else {
            // location.reload();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setCookie(cname, cvalue, exdays) {
      let date = new Date();
      date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000);
      let expires = "expires=" + date.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    getCookie(cname) {
      var strCookie = document.cookie;
      var arrCookie = strCookie.split("; ");
      for (var i = 0; i < arrCookie.length; i++) {
        var arr = arrCookie[i].split("=");
        if (cname == arr[0]) {
          return arr[1];
        }
      }
      return "";
    },

    xiugai_userlist() {
      this.user_list.user_id = "";
      this.perfectNumber = "";
      this.userId_seach = "";
    },
    open_id(perfect_number, user_id) {
      this.show = false;
      this.userId_seach = user_id;
      this.record = false;
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let arys = {
        perfectNumber: perfect_number,
        time: timestamp,
      };
      let _token = this.$.encryption(arys);
      let params = {
        time: timestamp,
        perfectNumber: perfect_number,
        sign: this.$.md5(_token),
      };

      this.$axios
        .post("/user/getUserbyNumber", qs.stringify(params))
        .then((res) => {
          if (res.data.status == 0) {
            this.user_list = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handelPay() {
      if(!this.isChecked){
       return Toast("请先勾选同意按钮")
      }
      if(!this.userId_seach){
       return Toast("请输入充值用户id")
      }
      this.isDisabledSubmitBtn = true; //防止用户点击多次
      let openId = this.getCookie("openId");
      console.log(openId);
      let amount;
      if(this.num_money>0){
       amount = this.num_money;
      }else{
        amount = this.buyList[this.liNum].money;
      }
      if (openId) {
        let arys = {
          userId: this.userId_seach,
          amount: amount,
          source: "gongzhonghao",
          openId: openId,
          type: 1,
        }; //参数
        let url = "/payment/wxRecharge";//微信支付
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
              this.payList = res.data.result;
              this.weixinPay(this.payList);
          }else{
             Toast(res.data.text);
          }
        });
      } else {
        // Toast("获取失败");
        let url = location.href;
        let codetest = RegExp(/code/);
        if (codetest.test(url)) {
          //地址中有code值
          let codeStr = url.split("?")[1].split("&")[0].split("=")[1];
          this.getOpenID(codeStr);
        } else {
          //地址中没有code值
          this.getCode();
        }
      }
    },
    //解决微信内置对象报错
    weixinPay(params) {
      var that = this;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            that.onBridgeReady(params),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            that.onBridgeReady(params)
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            that.onBridgeReady(params)
          );
        }
      } else {
        that.onBridgeReady();
      }
    },
    //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
    onBridgeReady() {
      console.log("拉起");
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          // debug: false,
          appId: this.payList.appId, //公众号名称，由商户传入
          timeStamp: this.payList.timestamp, //时间戳，自1970年以来的秒数
          nonceStr: this.payList.nonceStr, //随机串
          package: this.payList.package,
          signType: this.payList.signType, //微信签名方式：
          paySign: this.payList.paySign, //微信签名
          // jsApiList: ["chooseWXPay"]
        },
    

        function (res) {
          // alert(res.err_msg);
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            //支付成功后的操作
            that.getZuan();
            Toast("支付成功");
            // location.href = "http://api.xunyinjiaoyou.com/h5/#/recharge_wx";
            that.isDisabledSubmitBtn = true;
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            //取消支付的操作
            Toast("取消支付");
            that.isDisabledSubmitBtn = false; //按钮恢复高亮
          } else {
            //支付失败的操作
            Toast("支付失败");
            that.isDisabledSubmitBtn = false; //按钮恢复高亮
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.recharge {
  width: 100vw;
  overflow: hidden;
  background: #fff;
  padding-bottom: 8vw;
}
.banner_title{
  width: 92vw;
  height: 7.2vw;
  display: flex;
  align-items: center;
  position: absolute;
  left: 4vw;
}
.Tips_{
  width: 92vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 3.4vw;
}
.Tips_>span{
  font-size: 2.9vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9A9A9C;
}
.Tips_>span:nth-of-type(2){
  padding-top: 2vw;
}
.Tips_>span:nth-of-type(2)>input{
  width: 3.4vw;
  height: 3.4vw;
  margin-right: 0.4vw;
    display:table-cell; 
  vertical-align:bottom;
}
.Tips_>span:nth-of-type(2)>span{
  color: #0091FF;
}
.banner_title>img{
  width: 3.4vw;
  height: 3.4vw;
}
.banner_title>span{
  font-size: 2.9vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FF9300;
}
.recharge_my {
  z-index: 999;
  width: 92vw;
  margin-left: 4vw;
  height: 20vw;
  text-align: center;
  /* background: url("../../public/img/other/recharge_bg.png") no-repeat; */
  /* background-size: 100%; */
  position: relative;
  /* overflow: hidden; */
}

.recharge_my > div {
  position: absolute;
  top: 8vw;
  font-weight: 500;
  color: #ffffff;
  font-size: 3.2vw;
}
.recharge_money {
  width: 100vw;
  margin-top: 2.4vw;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.PaymentMethod{
  width: 92vw;
  height: 12vw;
  margin: 0 auto;
  margin-top: 3.4vw;
  display: flex;
  justify-content: space-between;
}
.PaymentMethod>div{
  width: 45vw;
  height: 11.8vw;
  background: rgba(0, 132, 255, 0.04);
  border-radius: 2vw;
  border: 1px solid #D0D0D0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.PaymentMethod>div>img:nth-of-type(2){
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6.3vw;
}
.PaymentMethod>div>img:nth-of-type(1){
  width: 17vw;
}
.PaymentMethod>.WechatPayment>img:nth-of-type(1){
  width: 24vw;
}
.AlipayPayment>img:nth-of-type(3){
  position: absolute;
  left: 0;
  top: 0;
  width: 6.8vw;
}
.AlipayPayment>img:nth-of-type(2){
  position: absolute;
  right: 0;
  bottom: 0;
  width: 6.3vw;
}
.recharge_money > p {
  margin-left: 4vw;
  font-size: 3.4vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 4.5vw;
  margin-top: 4.8vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #000000;
}
.recharge_money > p > span {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(130, 130, 130, 1);
  font-size: 3.1vw;
  margin-left: 2vw;
}
.recharge_buy {
  width: 92vw;
  margin-left: 4vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 4.8vw;
}
.recharge_buy > li {
  width: 29vw;
  text-align: center;
  height: 16.4vw;
  border-radius: 2vw;
  border: 1px solid #D0D0D0;
  margin-bottom: 3.4vw;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing:border-box;
  overflow: hidden;
}
.recharge_buy > li:nth-child(3n) {
  margin-right: 0;
}
.recharge_buy > li > p:nth-child(1) {
  font-size: 4.3vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-family: Arial-BoldMT, Arial;
  font-weight: normal;
  color: #0F0F0F
}
.recharge_buy > li > p:nth-child(1) > img {
  width: 4.3vw;
  margin-right: 0.8vw;
}
.recharge_buy > li > p:nth-child(2) {
  font-size: 2.9vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-top: 0.8vw;
}
.recharge_buy>li>img{
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 6.2vw;
  height: 6.2vw;
}
.hui {
  background: #f7f8fa;
}
.hong {
  border: 1px solid #0091FF!important;
  background: #fff7f3;
}
/* .recharge_money > div:nth-of-type(3) {
  width: 90vw;
  height: 7.2vw;
  margin-left: 5vw;
  margin-top: 4.8vw;
} */
.recharge_money > div:nth-of-type(2) > img {
  width: 7.2vw;
  float: left;
}
.recharge_money > div:nth-of-type(2) > p {
  float: left;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-size: 3.6vw;
  line-height: 7.2vw;
  margin-left: 2vw;
}
/* .recharge_money > div:nth-of-type(2) > div {
  float: right;
  width: 5vw;
  height: 5vw;
  margin-top: 1.1vw;
} */
.OtherAmounts{
  width: 92vw;
  margin: 0 auto;
  height: 10.6vw;
  background: #F8F8FA;
  border-radius: 1vw;
  border: 1px solid #D0D0D0;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
}
.OtherAmounts>input{
  padding-left: 4vw;
  padding-right: 4vw;
  width: 44vw;
  border: none;
  height: 8.6vw;
  background: #F8F8FA;
  line-height: 9.7vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.9vw;
}
.OtherAmounts>div{
  width: 40vw;
  height: 100%;
  line-height: 10vw;
  font-size: 3.86;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.clicktrue {
  background: url("../../public/img/other/ok.png") no-repeat;
  background-size: 100%;
  border-radius: 50%;
}
.clickfalse {
  border-radius: 50%;
  background: rgba(237, 237, 237, 1);
}
.recharge_money > p:nth-of-type(3) {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-size: 3.4vw;
  text-align: center;
  margin-top: 10vw;
}
.recharge_money > div:nth-of-type(4) {
  width: 79.5vw;
  height: 11.3vw;
  line-height: 11.3vw;
  text-align: center;
 background: linear-gradient(135deg, #64D4FF 0%, #3072FF 100%, #3072FF 100%);
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  font-size: 4.3vw;
  border-radius: 6.65vw;
  margin: 0 auto;
  margin-top: 4.8vw;
}
.roomifo_search {
  width: 92.3vw;
  height: 11.7vw;
  display: flex;
  justify-content: space-between;
}
.roomifo_search > div {
  height: 11.7vw;
  background: #f9f9f9;
  width: 92.3vw;
  border-radius: 1.5vw;
}
.roomifo_search > div > input {
  width: 88vw;
  font-weight: 400;
  height: 11.7vw;
  line-height: 11.7vw;
  color: #000000;
  letter-spacing: 1px;
  border: none;
  background: #f9f9f9;
  font-size: 3.9vw;
}
.roomifo_search > div > div {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(109, 114, 120, 1);
  font-size: 3.9vw;
  height: 8.7vw;
  line-height: 8.7vw;
  text-align: center;
}
.record {
  z-index: 999;
  position: absolute;
  top: 19vw !important;
  width: 92.3vw;
  /* height: 44vw; */
  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(12, 12, 13, 0.06);
  border-radius: 6px;
}
.record_list {
  width: 96%;
  height: 12vw;
  border-bottom: 1px solid #f3f3f3;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: #000000;
}
.record_list div {
  line-height: 12vw;
  width: 50%;
  height: 100%;
}
.record_list div:nth-of-type(1) {
  color: #333333;
  font-size: 3.9vw;
  font-weight: 500;
  font-family: PingFangSC-Regular, PingFang SC;
  text-align: left;
}
.record_list div:nth-of-type(2) {
  text-align: right;
  color: #aeaeae;
  font-size: 3.9vw;
  font-family: PingFangSC-Regular, PingFang SC;
}
.record_cookien {
  display: flex;
  flex-direction: column;
}
.record_cookien div {
  width: 95%;
  margin: 0 auto;
  height: 10.7vw;
  font-size: 3.9vw;
  font-weight: 400;
  line-height: 10.7vw;
  color: #7b7b7b;
  text-align: left;
}
.record_cookien strong {
  color: #484141;
}
.uner_list {
  width: 92vw;
  margin: 0 auto;
  margin-top: 8vw;
  height: 18vw;
  background: #ffffff;
  display: flex;
}
.uner_list > div:nth-of-type(1) {
  width: 14vw;
  height: 14vw;
}
.uner_list > div:nth-of-type(1) img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.uner_list > div:nth-of-type(2) {
  width: 34vw;
  height: 14vw;
}
.uner_list > div:nth-of-type(2) > div {
  width: 80%;
  margin: 0 auto;
}
.uner_list > div:nth-of-type(2) div:nth-of-type(1) {
  font-size: 4vw;
  color: #333333;
  line-height: 7vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
}
.uner_list > div:nth-of-type(2) div:nth-of-type(2) {
  font-size: 3.5vw;
  color: #333333 !important;
  line-height: 7vw;
  font-weight: 400;
}
.uner_list > div:nth-of-type(3) {
  width: 14vw;
  font-size: 3.9vw;
  color: #fe6810;
  line-height: 14vw;
}
.van_overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.border_bott{
  border: 1px solid #0091FF!important;
}
</style>